<script>
import NavbarToggler from "@/components/NavbarToggleButton.vue";
import FloatBtn from "@/components/FloatBtn.vue";
import SideRecommend from "@/components/SideRecommend.vue";
import VTitle from "@/components/VTitle.vue";

export default {
  props: {
    target: {
      type: [String, Number],
      default: '',
      description: "Button target element"
    },
    toggled: {
      type: Boolean,
      default: false,
      description: "Whether button is toggled"
    }
  },
  components: {
    VTitle,
    SideRecommend,
    FloatBtn,
    NavbarToggler,
  },
  methods: {
    getSvgImage(description, color) {
      // 根据描述和颜色生成对应的SVG图片
      const encodedDescription = encodeURIComponent(description);
      const encodedColor = encodeURIComponent(color);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3C/g%3E%3C/svg%3E`;
    }
  },
  mounted() {
    const urlId = this.$route.params.id;
    // 现在你可以使用id来获取父组件传递的参数
    console.log("id: " + urlId);
  },
  data() {
    return {
      variable: '',
      urlId: this.$route.params.id - 1, // 保存urlId为组件数据
      courseItems: [
        {
          "id": 1,
          "img": require("@/assets/img/python教程.png"),
          "title": "Python基础应用",
          "description": "本课程旨在帮助学生建立扎实的Python编程基础，并通过实际项目案例的演练，掌握Python在各种实际应用场景中的灵活运用。学生将通过理论讲解、实践操作和项目实战等环节，逐步掌握Python语言的核心概念和常用技巧，为将来从事数据分析、人工智能、Web开发等领域打下坚实基础。",
          "subTitle1": "课程介绍",
          "subDescription1": "Python基础应用课程旨在帮助学生建立扎实的Python编程基础，并通过实际项目案例的演练，掌握Python在各种实际应用场景中的灵活运用。学生将通过理论讲解、实践操作和项目实战等环节，逐步掌握Python语言的核心概念和常用技巧，为将来从事数据分析、人工智能、Web开发等领域打下坚实基础。",
          "subTitle2": "教师团队",
          "subDescription2": "我们的教师团队由经验丰富的Python开发专家组成，他们在行业中有多年的实际工作经验，并且对Python语言有深入的理解和实践经验。每位教师都具备扎实的教学功底和丰富的实践经验，能够针对学生的学习需求进行个性化指导，帮助学生克服学习难点，全面提升Python编程能力",
          "subTitle3": "课程标准",
          "subDescription3": "本课程按照以下标准进行设计和教学，以确保学生能够全面掌握Python编程基础：<br><br>系统性：课程内容涵盖了Python编程的核心概念和常用技巧，包括Python基础语法和数据类型、控制流程和函数定义、模块与包管理、文件操作与异常处理、Python面向对象编程、数据结构与算法基础等内容，从而确保学生可以系统性地掌握Python语言的基础知识。<br><br>实践性：课程注重实践操作和项目实战，通过大量的编程练习和实验案例，学生将能够巩固所学知识并在实际项目中应用所学技能，从而培养实际问题解决能力。<br><br>项目驱动：课程设置项目实战环节，通过实际案例的分析与解决方案展示，让学生能够将所学知识应用到实际项目中，提升解决问题的能力，培养学生的项目实战能力和创新思维。",
          "subTitle4": "考核方式",
          "subDescription4": "学生的学习成绩将通过以下方式进行考核，以全面评估其学习成果：<br><br>日常作业：包括编程练习、实验报告等，用于检验学生对课程内容的理解和掌握程度，以及对Python编程的实际应用能力。<br><br>项目实战：学生需要完成一个综合性的项目，展示在实际案例中应用Python的能力，该项目要求学生能够独立分析问题、设计解决方案并完成实施，对学生的项目实战能力进行全面评估。<br><br>学习笔记：学生需要撰写学习笔记，记录课程中的重要知识点和问题解决思路，以便评估学生的学习态度和对知识的掌握程度。<br><br>考核结果将综合评估学生的理论知识掌握情况、实践能力以及学习态度，最终评定学生的结业成绩并颁发相应的结业证书。这种全面的考核方式旨在确保学生在Python基础应用方面能够全面发展和提升。"
        },
        {
          "id": 2,
          "img": require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
          "title": "离散数学 东北大学",
          "description": "本课程旨在帮助学生掌握离散数学的基本概念和基本思想，为后续学习其他学科提供良好的铺垫。课程内容包括集合论、代数、数论、概率论、数理逻辑、数理统计等，通过系统性地学习和应用，学生将掌握离散数学的基本概念和基本思想，为后续学习其他学科提供良好的铺垫。",
          "subTitle1": "课程介绍",
          "subDescription1": "离散数学课程旨在帮助学生掌握离散数学的基本概念和基本思想，为后续学习其他学科提供良好的铺垫。课程内容包括集合论、代数、数论、概率论、数理逻辑、数理统计等，通过系统性地学习和应用，学生将掌握离散数学的基本概念和基本思想，为后续学习其他学科提供良好的铺垫。",
          "subTitle2": "教师团队",
          "subDescription2": "我们的教师团队由经验丰富的离散数学专家组成，他们拥有丰富的离散数学教学经验，并且对离散数学有丰富的实际应用经验。每位教师都具备扎实的教学功底和丰富的实践经验，能够针对学生的学习需求进行个性化指导，帮助学生克服学习难点，提升Python基础应用能力。",
          "subTitle3": "课程标准",
          "subDescription3": "本课程按照以下标准进行设计和教学，以确保学生能够全面掌握离散数学的基本概念和基本思想，以及对离散数学在其他学科中的应用：<br><br>系统性：课程内容涵盖了离散数学的基本概念和基本思想，包括集合论、代数、数论、概率论、数理逻辑、数理统计等，从而确保学生能够系统性地掌握离散数学的基本概念和基本思想。<br><br>实践性：课程注重实践操作和项目实战，通过大量的编程练习和实验案例，学生将能够巩固所学知识并在实际项目中应用所学技能，从而培养实际问题解决能力。<br><br>项目驱动：课程设置项目实战环节，通过实际案例的分析与解决方案展示，让学生能够将所学知识应用到实际项目中，提升解决问题的能力，培养学生的项目实战能力和创新思维。<br><br>考核方式：学生的学习成绩将通过以下方式进行考核，以全面评估其学习成果：<br><br>日常作业：包括编程练习、实验报告等，用于检验学生对课程内容的理解和掌握程度，以及对离散数学的实际应用能力。<br><br>项目实战：学生需要完成一个综合性的项目，展示在实际案例中应用离散数学的能力，该项目要求学生能够独立分析问题、设计解决方案并完成实施，对学生的项目实战能力进行全面评估。<br><br>学习笔记：学生需要撰写学习笔记，记录课程中的重要知识点和问题解决思路，以便评估学生的学习态度和对知识的掌握程度。<br><br>考核结果将综合评估学生的理论知识掌握情况、实践能力以及学习态度，最终评定学生的结业成绩并颁发相应的结业证书。这种全面的考核方式旨在确保学生在离散数学方面能够全面掌握离散数学的基本概念和基本思想，以及对离散数学在其他学科中的应用。",
          "subTitle4": "考核方式",
          "subDescription4": "学生的学习成绩将通过以下方式进行考核，以全面评估其学习成果：<br><br>日常作业：包括编程练习、实验报告等，用于检验学生对课程内容的理解和掌握程度，以及对离散数学的实际应用能力。<br><br>项目实战：学生需要完成一个综合性的项目，展示在实际案例中应用离散数学的能力，该项目要求学生能够独立分析问题、设计解决方案并完成实施，对学生的项目实战能力全面评估。<br><br>学习笔记：学生需要撰写学习笔记，记录课程中的重要知识点和问题解决思路，以便评估学生的学习态度和对知识的掌握程度。<br><br>考核结果将综合评估学生的理论知识掌握情况、实践能力以及学习态度，最终评定学生的结业成绩并颁发相应的结业证书。这种全面的考核方式旨在确保学生在离散数学方面能够全面掌握离散数学的基本概念和基本思想，以及对离散数学在其他学科中的应用。",
        },
        {
          "id": 3,
          "img": require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
          "title": "算法设计与分析",
          "description": "本课程由北航童咏昕教授主讲，旨在培养学生对算法设计与分析的深入理解。课程内容涵盖了算法的基本概念、设计技巧、复杂度分析以及各类经典算法的实现。通过学习，学生将能够掌握算法问题的建模方法，提高解决实际问题的算法设计能力，并能够对算法性能进行准确评估。",
          "subTitle1": "课程介绍",
          "subDescription1": "算法设计与分析课程由北航童咏昕教授主讲，课程内容围绕算法的设计与分析展开，包括分治策略、动态规划、贪心算法、回溯搜索等核心算法设计技术，以及时间复杂度和空间复杂度的分析方法。学生将通过大量的实例学习和实践，提升解决复杂问题的能力。",
          "subTitle2": "教师团队",
          "subDescription2": "本课程的教师团队由北航的资深教授和算法专家组成，他们在算法领域拥有深厚的研究背景和丰富的教学经验。团队成员能够针对不同学生的学习特点，提供专业的指导和帮助，确保学生能够有效吸收课程内容，提升算法设计与分析的技能。",
          "subTitle3": "课程标准",
          "subDescription3": "课程严格按照高标准设计，确保学生能够系统地学习算法设计与分析的相关知识。课程不仅包括理论知识的讲解，还强调算法实现的实践操作，以及通过案例分析来提高学生的综合应用能力。课程旨在培养学生的逻辑思维和创新能力，为学生未来在算法研究或相关领域的工作打下坚实的基础。",
          "subTitle4": "考核方式",
          "subDescription4": "学生的最终成绩将综合考虑以下几个方面：日常作业，包括算法实现和分析练习；项目实战，要求学生设计并分析一个完整的算法解决方案；以及参与课堂讨论和表现。此外，学生还需提交一份课程报告，总结学习体会和成果。通过这些多元化的考核方式，旨在全面评估学生的学习成效，确保学生能够深刻理解并应用算法设计与分析的知识。",
        },
        {
          "id": 4,
          "img": require("@/assets/img/华为公司终于将Python整理成了漫画书.png"),
          "title": "Python编程漫画书",
          "description": "本资源由华为公司精心整理，将复杂的Python编程知识以漫画书的形式呈现，旨在以轻松愉快的方式帮助初学者快速掌握Python编程基础。内容涵盖了Python的基本语法、数据结构、流程控制、函数与模块等核心概念，通过生动的漫画和实例，让学习变得更加直观和有趣。",
          "subTitle1": "课程介绍",
          "subDescription1": "Python编程漫画书是华为公司为编程初学者打造的一种全新的学习材料。它通过漫画的形式，将Python编程的基础知识变得生动有趣，易于理解。无论是编程新手还是对Python感兴趣的人士，都能通过阅读本书快速入门，建立起对Python编程的基本认识。",
          "subTitle2": "内容特色",
          "subDescription2": "本漫画书的特色在于它将枯燥的编程概念和知识点转化为易于消化的视觉内容。每个章节都围绕一个主题，通过故事情节和角色对话，引导读者一步步了解和掌握Python编程的各个方面。书中还包含了大量的练习题和实际案例，帮助读者巩固所学，并激发他们探索编程的兴趣。",
          "subTitle3": "适用人群",
          "subDescription3": "Python编程漫画书适合所有年龄段的读者，特别是那些对编程感兴趣但缺乏基础的初学者。它也适合作为青少年的编程启蒙书籍，以及希望以轻松方式学习Python的成人。无论是作为学校编程课程的辅助教材，还是个人自学的参考书，本书都能提供有效的学习支持。",
          "subTitle4": "学习效果",
          "subDescription4": "通过阅读Python编程漫画书，读者不仅能够掌握Python的基本语法和编程技巧，还能够培养解决问题的逻辑思维能力。书中的实战案例和练习能够帮助读者将理论知识应用到实际编程中，提高动手实践的能力。最终，读者将能够独立编写简单的Python程序，为进一步深入学习编程打下坚实的基础。"
        }
      ],

      docItems: [
        {
          id: 1,
          title: "Python 常用方法 教案",
          img: this.getSvgImage("Python 常用方法教案", "#fabe4f")
        },
        {
          id: 2,
          title: "Java 常量和变量 PPT",
          img: this.getSvgImage("java 常量和变量", "#79c7ff")
        },
        {
          id: 3,
          title: "Python 第一节 代码实例",
          img: this.getSvgImage("Python 代码实例", "#4fdac1")
        },
        {
          id: 4,
          title: "Java 实验报告",
          img: this.getSvgImage("Python 代码实例", "#da684f")
        },
        // 添加更多的项
      ]
    }
  }
};

</script>

<template>
  <div>
    <v-title>查看文档 - 思议在线学习平台</v-title>
    <float-btn/>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <span class="deco"></span>
            <h2 class="clearMargin">面向对象程序设计</h2>
          </div>
        </card>
      </div>
      <div class="col-lg-9">
        <card>
          <iframe id="iframe1" :src="'https://view.officeapps.live.com/op/view.aspx?src='" allowtransparency='yes' border='0' frameborder='no' height="780 px" marginheight='0'
                  marginwidth='0' scrolling='no'
                  width="100%"></iframe>
        </card>
      </div>
      <div class="col-lg-3">
        <side-recommend :category="'course'" :items="courseItems">
          <template v-slot:title>推荐课程</template>
        </side-recommend>
        <!--        <side-recommend>
                  <template v-slot:title>推荐练习</template>
                </side-recommend>-->
        <side-recommend :items="docItems" category="doc">
          <template v-slot:title>推荐课件</template>
        </side-recommend>
      </div>

    </div>
  </div>
</template>

<style scoped>
.col-lg-7 {
  position: relative;
}

.start-study {
  width: 10rem;
}

@media (max-width: 991px) {
  .col-lg-7 {
    padding-left: 2rem;
  }

  .start-study {
    width: 100%;
  }
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}
</style>
